<template>
	<view class="page">
		<view class="top">
			<image src="/static/img/login-top.png" class="login-top" mode="aspectFill"></image>
			<image src="/static/img/not-login.png" class="user"></image>
			<text class="wechat-name">立即登录</text>
			<view class="share-wrap">
				<image src="/static/img/share.png" class="share"></image>
				<text class="share-content">分享APP</text>
			</view>
		</view>
	<!-- 	<view class="info">
			<view class="info-item" v-for="(item,index) in info" :key="index">
				<image :src="item.icon" class="pay"></image>
				<text class="pay-content">{{item.content}}</text>
			</view>
		</view> -->
		<image src="/static/img/summer-sale.png" class="summer"></image>
		<view class="bottom">
			<view class="bottom-item" v-for="(item,index) in bottomInfo" :key="index">
				<text class="left">{{item.left}}</text>
				<text class="right">{{item.right}}</text>
				<image src="/static/img/arrow.png"></image>
				<view class="bar"></view>
			</view>
		</view>
		<image src="/static/img/luck.png" class="luck"></image>
		<text class="network">有派网络@技术支持</text>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				info: [
					{
						content: '待付款',
						icon: '/static/img/pay.png'
					},
					{
						content: '待发货',
						icon: '/static/img/send.png'
					},
					{
						content: '运输中',
						icon: '/static/img/transport.png'
					},
					{
						content: '历史',
						icon: '/static/img/history.png'
					}
				],
				bottomInfo: [
					{
						left: '消息记录',
						right: ''
					},
					{
						left: '浏览记录',
						right: ''
					},
					{
						left: '账号设置',
						right: ''
					},
					{
						left: '联系客服',
						right: ''
					}, 
					{
						left: '平台协议',
						right: ''
					},
					{
						left: '商家入驻',
						right: ''
					},
					{
						left: '检测更新',
						right: 'V 1.1.0'
					}
				]
			}
		}
	}
</script>

<style>
	.page {
		width: 100%;
		height: 100%;
		padding-bottom: 98rpx;
	}
	.top {
		position: relative;
		width: 750rpx;
		height: 376rpx;
		margin-top: -5rpx;
	}
	.login-top {
		width: 750rpx;
		height: 390rpx;
	}
	.user {
		position: absolute;
		left: 80rpx;
		top: 176rpx;
		width: 138rpx;
		height: 138rpx;
	}
	.wechat-name {
		position: absolute;
		top: 206rpx;
		left: 277rpx;
		width: 161rpx;
		height: 43rpx;
		font-size: 40rpx;
		font-family: PingFang SC;
		font-weight: bold;
		text-decoration: underline;
		color: rgba(100,58,0,1);
	}
	.share-wrap {
		position: absolute;
		right: 23rpx;
		top: 268rpx;
		width: 153rpx;
		height: 56rpx;
	}
	.share {
		width: 153rpx;
		height: 56rpx;
	}
	.share-content {
		position: absolute;
		top: 5rpx;
		left: 22rpx;
		height: 26rpx;
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: rgba(255,255,255,1);
	}
	.info {
		display: flex;
		justify-content: space-around;
		align-items: center;
		position: relative;
		margin-top: -20rpx;
		width: 690rpx;
		height: 148rpx;
		background: rgba(255,255,255,1);
		box-shadow: 0rpx 3rpx 7rpx 0rpx rgba(0, 0, 0, 0.35);
		border-radius: 20rpx;
		margin-left: 30rpx;
	}
	.pay {
		width: 51rpx;
		height: 51rpx;
	}
	.pay-content {
		display: block;
		margin-top: 10rpx;
		height:26rpx;
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: rgba(51,51,51,1);
	}
	.info-item {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}
	.summer {
		width: 750rpx;
		height: 210rpx;
		margin-top: 30rpx;
	}
	.bottom {
		width: 750rpx;
		background: rgba(255,255,255,1);
		box-shadow: 0rpx -3rpx 7rpx 0rpx rgba(177,177,177,0.4), 0px 3px 7px 0px rgba(177,177,177,0.4);
		margin-top: 20rpx;
	}
	.bottom-item {
		position: relative;
		width: 750rpx;
		height: 79rpx;
	}
	.left {
		height: 28rpx;
		line-height: 75rpx;
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: rgba(51,51,51,1);
		margin-left: 33rpx;
	}
	.right {
		float: right;
		margin-right: 72rpx;
		width: 92rpx;
		height: 22rpx;
		line-height: 75rpx;
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: rgba(153,153,153,1);
	}
	.bottom-item image {
		flex: 1;
		position: absolute;
		top: 25rpx;
		right: 30rpx;
		width: 14rpx;
		height: 26rpx;
	}
	 .bar {
		 width: 670rpx;
		 height: 1rpx;
		 background:rgba(204,204,204,1);
		 margin-left: 40rpx;
	 }
	 .luck {
		 width: 750rpx;
		 height: 216rpx;
		 margin-top: 30rpx;
	 }
	 .network {
		 display: block;
		 margin-left: 261rpx;
		 margin-top: 60rpx;
		 height: 25rpx;
		 font-size: 26rpx;
		 font-family: PingFang SC;
		 font-weight: 500;
		 color: rgba(153,153,153,1);
	 }
</style>
